<script setup lang="ts" name="userArticle">
// userArticle
import {onMounted, ref, watch} from "vue";
import {meNotesList, meArticleFind, meArticleEdit, meArticleAdd, meArticleDelete} from "@/api/user"
import {usePage} from "@/plugins/pagination";
import {Modal} from "view-ui-plus";
import Editor from "@/components/Editor.vue"
import {Message} from "view-ui-plus";


let pagination = usePage();
let loading = ref(false);
let loading_model = ref(false);
let loading_submit = ref(false);
let showModal = ref(false);
let columns = ref([
  {
    title: '标题',
    key: 'title',
  },
  {
    title: '标签',
    key: 'tag',
  },
  {
    title: '浏览量',
    key: 'Views',
    width: 100,
    align: 'center'
  },
  {
    title: '置顶',
    key: 'top',
    slot: 'top',
    width: 100,
    align: 'center'
  },
  {
    title: '创建时间',
    key: 'create_time',
  },
  {
    title: '状态',
    key: 'status',
    slot: 'status',
    width: 120,
    align: 'center'
  },
  {
    title: '操作',
    slot: 'action',
    width: 160,
    fixed: 'right',
    align: 'center'
  }
]);
let data = ref([]);
let formElement = ref();
let formValidate = ref<any>({
  title: '',
  intro: '',
});
let ruleValidate = ref({
  title: [
    {required: true, message: '请输入标题', trigger: 'change'}
  ],
});
let tabName = ref('all');

watch(tabName, (value) => {
  pagination.pageNo = 1;
  getList();
})

const add = () => {
  // 新增文章
  formValidate.value = {
    readonly: false,
    append: true
  };
  showModal.value = true;
  loading_model.value = false;
}

const show = (id: any, readonly: boolean) => {
  // 查看 && 编辑
  formValidate.value.readonly = readonly;
  showModal.value = true;
  loading_model.value = true;
  meArticleFind(id).then((result) => {
    console.log(result)
    formValidate.value = {
      ...result.data,
      readonly
    };
    loading_model.value = false;
  })
  if (readonly) {

  } else {

  }
}

const remove = async (id: any) => {
  // 删除文章
  Modal.confirm({
    title: '警告',
    content: '<p>确认要删除该文章吗？</p>',
    loading: true,
    onOk: () => {
      meArticleDelete(id).then((result: any) => {
        if (result.code == 200) {
          Message.success(result.data);
          getList();
        } else {
          Message.error(result.data)
        }
        Modal.remove();
      })
    }
  });
}

const onOk = () => {
  // 保存
  formElement.value?.validate((valid) => {
    if (valid) {
      loading_submit.value = true;
      setTimeout(() => {
        if (formValidate.value.append) {
          meArticleAdd(formValidate.value).then((result: any) => {
            console.log(result)
            loading_submit.value = false;
            if (result.code == 200) {
              Message.success(result.data)
              showModal.value = false;
              getList();
            } else {
              Message.error(result.data)
            }
          }).catch((result: any) => {
            loading_submit.value = false;
          })
        } else {
          meArticleEdit(formValidate.value).then((result: any) => {
            console.log(result)
            loading_submit.value = false;
            if (result.code == 200) {
              Message.success(result.data)
              showModal.value = false;
              getList();
            } else {
              Message.error(result.data)
            }
          }).catch((result: any) => {
            loading_submit.value = false;
          })
        }
      }, 500)
    } else {
      console.log("error")
    }
  })
}
const onCancel = () => {
  // 关闭弹窗触发
  console.log('关闭弹窗')
  formValidate.value = {};
}

const getList = () => {
  // 获取我发布的文章列
  loading.value = true;
  const params:any = {
    ...pagination
  }
  // 已审批
  if(tabName.value == "publish") params.status = 1;
  // 审批中
  if(tabName.value == "check") params.status = 0;
  meNotesList(params).then((result: any) => {
    console.log(result)
    data.value = result.data.data;
    pagination.total = result.data.total;
  }).finally(() => loading.value = false)
}

onMounted(() => {
  getList();
})
</script>
<!--<script>-->
<!--export default {-->
<!--  name: 'userArticle'-->
<!--}-->
<!--</script>-->

<template>
  <div>
    <Space>
      <Tooltip :max-width="400" content="非管理员用户需等待审批通过后方可访问文章" placement="right">
        <Button @click="add">发布文章</Button>
      </Tooltip>
    </Space>
    <Tabs style="margin-top: 5px" v-model="tabName">
      <TabPane label="全部" name="all"></TabPane>
      <TabPane label="已发布" name="publish"></TabPane>
      <TabPane label="审核中" name="check"></TabPane>
    </Tabs>
    <Table border :columns="columns" :data="data" :loading="loading">
      <template #action="{ row, index }">
        <Space :size="10">
          <a type="primary" size="small" @click="show(row.id,true)">查看</a>
          <a type="primary" size="small" @click="show(row.id,false)">编辑</a>
          <a type="error" size="small" @click="remove(row.id)">删除</a>
        </Space>
      </template>
      <template #top="{ row, index }">
        <Poptip v-if="new Date(row.is_top).getTime() > Date.now()" transfer trigger="hover" title="置顶结束时间"
                :content="row.is_top">
          <Tag color="#ea3323">置顶中</Tag>
        </Poptip>
        <Tag v-else>无</Tag>
      </template>
      <template #status="{ row, index }">
        <Tag v-if="row.status == 0" color="warning">审核中</Tag>
        <Tag v-if="row.status == 1" color="success">正常</Tag>
        <Tag v-if="row.status == 2" color="error">审核失败</Tag>
      </template>
    </Table>
    <Page style="margin-top: 10px;" :modelValue="pagination.pageNo" :total="pagination.total"
          @on-change="(e) => {pagination.pageNo = e;getList()}"
           show-total show-elevator/>
    <Modal
        loading
        :width="60"
        v-model="showModal"
        :mask-closable="false"
        :title="formValidate.readonly ? '查看' : formValidate.append ? '新增' : '编辑'"
        @on-cancel="onCancel"
    >
      <div :class="{pointerNone:formValidate.readonly || loading_submit}">
        <Spin v-if="loading_model"></Spin>
        <Form v-else ref="formElement" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <FormItem label="标题" prop="name">
            <Input v-model="formValidate.title" placeholder="标题"></Input>
          </FormItem>
          <FormItem label="标签" prop="tag">
            <Input v-model="formValidate.tag" placeholder="使用|分隔多个"></Input>
          </FormItem>
          <FormItem label="正文" prop="content">
            <Editor v-if="showModal" v-model="formValidate.content"/>
          </FormItem>
        </Form>
      </div>
      <template #footer>
        <Space :size="20">
          <a @click="showModal=false">取消</a>
          <Button @click="onOk" type="primary" :loading="loading_submit">保存</Button>
        </Space>
      </template>
    </Modal>
  </div>
</template>

<style scoped lang="scss">
.pointerNone {
  pointer-events: none;
}
</style>
